<template>
  <!-- 编辑弹出框 -->
  <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="90%" top="5vh">
    <el-form ref="dataForm" :model="dataForm" label-width="80px">
      <el-row>
        <el-col :span="6">
          <el-form-item label="ID">
            <el-input v-model="dataForm.id" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="分类">
            <el-select v-model="dataForm.categoryId" placeholder="选择分类">
              <el-option v-for="item in categoryList" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="价格">
            <el-input v-model="dataForm.price"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="商品名">
            <el-input v-model="dataForm.name"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="商品规格">
            <el-input v-model="dataForm.spec"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item label="销售亮点">
        <el-input v-model="dataForm.sellPoint"></el-input>
      </el-form-item>

      <el-row>
        <el-col :span="18">
          <el-form-item label="轮播图列">
            <el-input v-model="albums"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="上架时间">
            <el-date-picker v-model="dataForm.createTime" type="datetime" format="yyyy-MM-dd HH:mm:ss"
                            placeholder="选择日期时间" value-format="string"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="数量">
            <el-input v-model="dataForm.count"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="状态">
            <el-switch v-model="dataForm.status" active-color="#13ce66" inactive-color="#ff4949" :active-value="1"
                       :inactive-value="0"></el-switch>
          </el-form-item>
        </el-col>
        <el-col :span="6"></el-col>
      </el-row>
      <el-form-item label="商品详情">
        <!-- 使用富文本组件 -->
        <editor :content.sync="dataForm.content" style="height: 500px;"></editor>
      </el-form-item>
    </el-form>
    <!-- 底部按钮 -->
    <span slot="footer" class="dialog-footer">
      <el-button size="medium" @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="handleSubmit">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import * as GoodsAPI from '@/api/goods.js';
import Editor from '@/components/Tinymce/index.vue'; //导入封装后的富文本组件
import dayjs from 'dayjs' ;

export default {
  name: 'GoodsEdit',
  components: {
    editor: Editor //注册富文本组件
  },
  props: {
    categoryId: {
      type: Number,
      default: 0
    },
    categoryList: Array //分类选项数据
  },
  data() {
    return {
      dialogVisible: false,
      dataForm: {
        id: 0
      },
      albums: "",
      //数据校验规则，后续继续完善
      rules: {}
    };
  },
  computed: {
    //弹框标题
    dialogTitle() {
      return !this.dataForm.id ? '新增' : '编辑';
    }
  },

  methods: {
    init(id) {
      this.dataForm.id = id || 0;
      this.dialogVisible = true;
      this.$nextTick(() => {
        this.$refs.dataForm.resetFields();
        if (id) {
          //是编辑
          GoodsAPI.getDetailById(id).then(result => {
            this.dataForm = result.data; //返回数据结构详见API文档
            this.albums = this.dataForm.album.toString();
          });
        } else {
          //是新增
          this.setDataFormToDefault();
        }
      });
    },

    // 确认提交
    handleSubmit() {
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
          this.dataForm.album = this.albums.split(",");
          GoodsAPI.save(this.dataForm)
            .then(() => {
              this.$message.success(`保存成功`);
              this.dialogVisible = false;
              this.$emit('refreshDataList'); //重新刷新列表数据
            })
            .catch(error => {
            });
        }
      });
    },

    setDataFormToDefault() {
      //初始默认值
      let defaultForm = {};
      defaultForm.id = 0;
      defaultForm.categoryId = this.categoryId; //Props传递的参数
      defaultForm.name = '';
      defaultForm.spec = '';
      defaultForm.sellPoint = '';
      defaultForm.price = 0;
      defaultForm.count = 0;
      defaultForm.img = '';
      defaultForm.album = '';
      defaultForm.content = '';
      defaultForm.status = 0;
      defaultForm.createTime = dayjs(Date.now()).format('YYYY-MM-DD HH:mm:ss');
      defaultForm.remark = '';
      this.dataForm = Object.assign({}, defaultForm);
    }
  }
};
</script>

<style scoped></style>
